<template>
  <view class="upload-section">
    <view class="form-row">
      <view class="form-label">{{ config.label }}：</view>
      <uni-file-picker 
        :limit="config.limit || 9" 
        file-mediatype="image" 
        :value="station[config.field]" 
        mode="grid"
        :imageStyles="imageStyle"
        @select="handleSelect" 
		@delete="handleDelete"
      />
    </view>
    
    <view class="example-section" v-if="config.exampleImage">
      <view class="example-title">示例图：</view>
      <image 
        class="example-img" 
        :src="config.exampleImage" 
        mode="aspectFill"
        @click="previewExample"
      />
      <view class="example-desc">{{ config.exampleDesc }}</view>
    </view>
  </view>
</template>

<script>
import * as UploadApi from "@/api/infra/upload.js";

export default {
  name: "UploadSection",
  props: {
    config: {
      type: Object,
      required: true
    },
    station: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      imageStyle: {
        width: 100,
        height: 100,
        border: {
          radius: '8px'
        }
      }
    };
  },
  methods: {
    handleSelect(e) {
		debugger
      const files = e.tempFiles || [];
      if (files.length === 0) return;
      
      files.forEach(file => {
        UploadApi.uploadImage(file.path, this.config.field, (url) => {
          const newImage = {
            url: url,
            extname: url.split('.').pop().toLowerCase()
          };
          
          const currentImages = this.station[this.config.field] || [];
          const newImages = [...currentImages, newImage];
          this.$emit('update-station', {
                    field: this.config.field,
                    value: newImages
                  });
        });
      });
    },
	handleDelete(e) {
	  console.log('删除事件:', e);
	  const { tempFile, tempFilePath } = e;
	  
	  // 获取当前图片数组
	  const currentImages = this.station[this.config.field] || [];
	  
	  // 根据不同的标识符找到要删除的图片
	  let imageToDeleteIndex = -1;
	  
	  if (tempFile && tempFile.url) {
		// 通过 url 匹配
		imageToDeleteIndex = currentImages.findIndex(img => img.url === tempFile.url);
	  } else if (tempFilePath) {
		// 通过临时路径匹配（新上传但未保存的图片）
		imageToDeleteIndex = currentImages.findIndex(img => img.url === tempFilePath || img.path === tempFilePath);
	  }
	  
	  if (imageToDeleteIndex !== -1) {
		// 从数组中移除图片
		const newImages = [...currentImages];
		newImages.splice(imageToDeleteIndex, 1);
		  this.$emit('update-station', {
			field: this.config.field,
			value: newImages
		  });
		
		console.log(`删除了 ${this.config.label} 中的一张图片`);
	  } else {
		console.warn('未找到要删除的图片');
	  }
	},
    
    previewExample() {
      if (this.config.exampleImage) {
        uni.previewImage({
          urls: [this.config.exampleImage],
          current: 0
        });
      }
    }
  }
};
</script>

<style scoped>
.upload-section {
  margin-bottom: 20rpx;
  width: 100%;
}

.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10rpx;
  width: 100%;
}

.form-label {
  width: 200rpx;
  font-weight: bold;
  color: #333;
  flex-shrink: 0;
}

.example-section {
  margin: 10rpx 0 30rpx 200rpx;
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
  width: calc(100% - 200rpx);
}

.example-title {
  font-weight: bold;
  color: #555;
  margin-bottom: 10rpx;
}

.example-img {
  width: 100%;
  max-width: 500rpx;
  height: 280rpx;
  border-radius: 12rpx;
  object-fit: cover;
  margin-bottom: 10rpx;
}

.example-desc {
  font-size: 24rpx;
  color: #888;
}
</style>